<template>
  <div class="c-bg-sgray">
    <div class="c-ph24 c-pv32 c-bg-white c-flex-row c-aligni-center c-justify-sb">
      <div class="c-flex-row c-aligni-center c-pv28 c-ww282 c-ph28 c-justify-sb c-bg-f6 c-br16" @click="startTest(7,rId)">
        <div>
          <div class="c-fc-xblack c-fs24">练习错题</div>
          <div class="c-fc-gray c-fs20 c-mt4">共{{number}}道错题</div>
        </div>
        <img class="c-ww64" src="@/assets/i/wap/exam/wore.png" alt="">
      </div>
      <div class="c-flex-row c-aligni-center c-pv28 c-ww282 c-ph28 c-justify-sb c-bg-f6 c-br16" @click="watchWrong">
        <div class="">
          <div class="c-fc-xblack c-fs24">背题模式</div>
          <div class="c-fc-gray c-fs20 c-mt4">共{{shortNumber}}道小题</div>
        </div>
        <img class="c-ww64" src="@/assets/i/wap/exam/sorn.png" alt="">
      </div>
    </div>
    <div class="c-ph24 c-pv24">
      <div class="c-bg-white c-br16 c-ph24 c-pv24">
        <div class="c-fs26 c-fc-xblack">错题分布</div>
        <div class="c-flex-row c-aligni-center c-mt24">
          <div class="c-br28 c-fs20 c-ph28 c-pv12 c-fc-xblack c-bg-f6" :class="sort==1?'theme-fc theme-bd1 theme-bg-10':''" @click="selectSort(1)">题型分布</div>
          <div class="c-br28 c-fs20 c-ph28 c-pv12 c-ml20 c-fc-xblack c-bg-f6" :class="sort==2?'theme-fc theme-bd1 theme-bg-10':''" @click="selectSort(2)">章节分布</div>
        </div>
        <div v-for="(item, index) in chapterInfo" v-if="chapterInfo" :key="index" :class="index==0?'c-mt20':''">
          <div v-if="item.hasChildren" :class="index!=chapterInfo.length-1?'c-bd-b1-f5 c-pb20':''">
            <div class="c-pv20">
              <div class="c-flex-row c-aligni-center">
                <div @click="changeShow(index,item)" class="theme-fc c-fs26 c-fw600 iconfont c-textAlign-c">{{item.isShow ? '&#xe8a0;' : '&#xe8a1;'}}</div>
                <div @click="takePartIn(5,item)" class="c-flex-row c-aligni-center c-justify-sb c-flex-grow1 c-ml20">
                  <div class="c-fs24 c-fc-xblack c-ww300 c-text-ellipsis1">{{item.name}}</div>
                  <div class="c-flex-row c-aligni-center">
                    <div class="c-fs20 c-fc-gray c-flex-row c-aligni-center  c-mr10"><span>{{item.hasQuestionNum}}道</span><span class="c-ph10 c-fc-sgray" v-if="chapterInfo.lastRid==item.rId">|</span><span class="c-fs20 theme-fc" v-if="chapterInfo.lastRid==item.rId">上次做到</span></div>
                    <div class="c-fs30 c-fc-sgray iconfont">&#xe635;</div>
                  </div>
                </div>
              </div>
            </div>
            <practice-chiren class="c-bg-sgray c-br16" :isWrong='true' v-show="item.isShow" :ttId="ttId" :tpId="tpId" :tlId="tlId" :progress="progress" :practiceId="practiceId" :chapterInfo="item.children" :rId="item.rId"></practice-chiren>
          </div>
          <div @click="takePartIn(5,item)" v-else-if="!item.hasChildren" class="c-pv20 c-bg-white c-flex-row c-aligni-center c-justify-sb c-br12" :class="index!=chapterInfo.length-1?'c-bd-b1-f5':''">
            <div class="c-ww300">
              <div class="c-fs24 c-fc-xblack c-text-ellipsis1">{{sort==1?styleName[item.type]:item.name}}</div>
            </div>
            <div class="c-flex-row c-aligni-center">
              <div class="c-fs20 c-fc-gray  c-mr10">{{item.hasQuestionNum}}道<span class="c-ph10 c-fc-sgray" v-if="sort==2&&chapterInfo.lastRid==item.rId">|</span><span class="c-fs20 theme-fc" v-if="sort==2&&chapterInfo.lastRid==item.rId">上次做到</span></div>
              <div class="c-fs30 c-fc-sgray iconfont">&#xe635;</div>
            </div>
          </div>
        </div>
        <loading-status-tem :noData="chapterInfo == null || chapterInfo.length == 0" :noDataText="'暂无错题'"></loading-status-tem>
      </div>
    </div>
  </div>
</template>
<script>
import { utilJs } from "@/utils/common.js";
import practiceChiren from "@/components/templates/examination/practiceChiren.vue";
import loadingStatusTem from "@/components/templates/common/loadingStatusTem.vue";
export default {
  name: "practiceWrongList",
  components: {
    practiceChiren,
    loadingStatusTem
  },
  props: [],
  data() {
    return {
      chapterInfo: null,
      rId:0,
      isFromPractice:'',
      sort:1,
      styleName: {
        '1': '单选题',
        '2': '多选题',
        '3': '问答题',
        '4': '判断题',
        '5': '填空题',
        '9': '阅读理解题',
        '10': '材料演示题',
        '11': '完型填空题',
      },
      number:0,
      shortNumber:0,
      practiceId:0,
      isClick:true
    };
  },
  created() {
    utilJs.appShare(this);
  },
  mounted() { },
  methods: {
    watchWrong() {
      if (this.shortNumber == 0) {
        this.$showCjToast({
          text: "暂无错题",
          type: "warn",
          time: 1500
        });
        return
      }
      this.$routerGo(this, "replace", {
        path: "/member/myWrongTopic/examWrongTopic/itemWrongAnswerAnalyze",
        query: { rId:this.practiceId}
      });
    },
    startTest(type, rId, questionType) {
      let $this = this
      let data = {
        libraryId: $this.practiceId,
        type: type,
        rId: rId,
      };
      if (type == 7 && this.number == 0) {
        this.$showCjToast({
          text: "暂无错题",
          type: "warn",
          time: 1500
        });
        return
      }
      if (type == 8) {
        data.libraryId = rId
        data.questionType = questionType
      }
       utilJs.postMethod(`${global.apiurl}itemBank/takePartIn`, data, function (
        res
      ) {
        let queryT = {
          libraryId: $this.practiceId,
          type:type,
          goOnNum: 1,
          rId: rId,
          questionType:data.questionType || 0,
          isFromPractice:$this.$route.query.isFromPractice || ''
        }
        if ($this.type == 5 || $this.type == 3) {
          queryT.rId = $this.rId;
        }
        $this.$routerGo($this, "push", {
          path: '/homePage/itemBank/questionAnswer',
          query: queryT
        })
      })
    },
    selectSort(sort) {
      this.sort = sort
      this.chapterInfo = {};
      if (this.sort == 2) {
        this.getMyPracitceWrongList()
      } else {
        this.errorProblemTypeClassify()
      }
    },
    changeShow(cIndex, item) {
        if (item.hasChildren && !item.children) {
          //获取章节列表/api/itemBank/itemChildTree/{rId}
          let getUrl = global.apiurl + "itemBank/itemChildTree/" + item.rId + '?libraryId=' + this.practiceId
          utilJs.getMethod(getUrl, res => {
            this.$set(this.chapterInfo[cIndex], "children", res)
            this.$set(this.chapterInfo[cIndex], "isShow", true)
          })
      } else {
        if (this.chapterInfo[cIndex].isShow) {
          this.$set(this.chapterInfo[cIndex], "isShow", false)
        } else {
          this.$set(this.chapterInfo[cIndex], "isShow", true)
        }
      }
    },
    getErrorNumber() {
      utilJs.getMethod(`${global.apiurl}itemBank/getErrorNumber/${this.practiceId}`,
        res => {
          this.number = res.number
          this.shortNumber = res.shortNumber
          this.libraryId = res.libraryId
        },
        failRes => {
        }
      );
    },
    getMyPracitceWrongList() {
      if (this.isClick) {
        this.isClick = false
        utilJs.getMethod(`${global.apiurl}itemBank/itemTree/${this.practiceId}`,
          res => {
            this.chapterInfo = res.list;
            if (this.chapterInfo.children && this.chapterInfo.children.length > 0) {
              for (let i = 0; i < this.chapterInfo.children.length; i++) {
                this.$set(this.chapterInfo.children[i], 'isShow', true);
              }
            }
            this.isClick = true
          },
          failRes => {
            this.isClick = true
          }
        );
      }
    },
    errorProblemTypeClassify() {
       if (this.isClick) {
        this.isClick = false
        utilJs.getMethod(`${global.apiurl}itemBank/errorProblemTypeClassify/${this.practiceId}`,
          res => {
            this.chapterInfo = res;
            if (this.chapterInfo.children && this.chapterInfo.children.length > 0) {
              for (let i = 0; i < this.chapterInfo.children.length; i++) {
                this.$set(this.chapterInfo.children[i], 'isShow', true);
              }
            }
            this.isClick = true
          },
          failRes => {
          }
        );
      }
    },
    takePartIn(mode, item) {
      if (Number(item.hasQuestionNum) == 0) {
        this.$showCjToast({
          text: "暂无错题需要订正",
          type: "warn",
          time: 1500
        });
        return
      }
      if (this.sort == 2) {
        this.startTest(mode, item.rId)
        console.log(mode, item.rId)
      } else {
        this.startTest(8, item.libraryId, item.type)
      }
      // let $this = this;
      // let queryT = {
      //   wrongNum: item.hasQuestionNum,
      //   libraryId: $this.practiceId,
      //   type: mode,
      //   rId: item.rId,
      //   topicName:item.name,
      //   isFromPractice:$this.isFromPractice
      // }
      // $this.$routerGo($this, "push", {
      //   path: '/member/myWrongTopic/examWrongTopic/itemWrongEnty',
      //   query: queryT
      // })
    },
    //分享
    wechatShare: function () {
      let title = "练习列表"; //window.localStorage.getItem("shareTitle");
      let shareImg = window.localStorage.getItem("shareLogo");
      let shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId")
      let shareDesc = window.localStorage.getItem("shareDesc");
      utilJs.wechatConfig(shareUrl, title, shareImg, shareDesc, function () { });
    },
    //手机端分享
    appShare: function () {
      var shareUrl =
        window.location.href.split("#")[0] +
        "#/homePage/itemBank/questionList" + "?refereeId=" +
        localStorage.getItem("userId");
      utilJs.appShareTrue("", "", shareUrl, "");
    },
  },
  activated() {
    setDocumentTitle("我的错题");// eslint-disable-line
    this.rId = this.$route.query.rId || 0;
    this.practiceId = this.$route.query.practiceId || 0;
    this.chapterInfo = {};
    this.isFromPractice = this.$route.query.isFromPractice || ''
    this.selectSort(this.sort)
    this.getErrorNumber()
    this.wechatShare();
  },
  deactivated() {
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
</style>


